<template>
	<view class="artisterBg" :style="{backgroundImage: 'url('+ArtisterInfo.BackgroundPic+')'}">
		<!-- 裁切 -->
		<view class="fui-wrap" style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 9999;"
			v-if="isShowTailor">
			<jp-cropper-watermark mode="free" :width="600" :height="400" :maxWidth="1024" :maxHeight="1024"
				:url="TailorSrc" @cancel="isShowTailor = false" @ok="onSubmitTailor"></jp-cropper-watermark>
		</view>


		<view class="status_bar" style="height:90rpx">
			<fui-status-bar background="none" isFixed></fui-status-bar>
		</view>
		<view class="goBack" @click="goBack">
			<fui-icon name="arrowleft" color="#FFF"></fui-icon>
		</view>

		<view class="bottomBtns">
			<view @click="gotoEdit" class="bottomEditBtn">完善资料</view>
			<view @click="goNavPage('/artistesPages/pages/artister?artisterID='+ArtisterInfo.UserID + '&isYulan=1')"
				class="showBtn">预览</view>
		</view>

		<view class="bgtext" :style="{ height: bigBoxStyle.height - 45 + 'px' }" @click="updatebackground">
			<view class="" v-if="noBackgroundPic">
				点击设置你的个人主页封面<br>可增加你的主页人气
			</view>
		</view>

		<view class="artisterTitles">
			<view class="artisterHeadpic">
				<ZtHeadWear :width="150" :height="150" border-width="6" :WxHeadPic="ArtisterInfo.WxHeadPic"
					:userInfo="ArtisterInfo" :UserLevelID="ArtisterInfo.UserLevelID" image-height="30" image-width="40"
					size="20" oneRight="0"></ZtHeadWear>
			</view>
			<view class="interestBtn" @click="gotoEdit">编辑</view>
			<view class="artisterInfo">
				<view style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">
					<view class="arterName"
						style="font-size:36rpx;font-weight:bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 80%;">
						{{ ArtisterInfo.NickName }}
					</view>
					<image :src="baseUrl + 'icon/boy.png'" style="width:30rpx;height: 30rpx;margin-left: 10rpx;"
						v-if="ArtisterInfo.UserSex && JSON.parse(ArtisterInfo.UserSex).value == 1"></image>
					<image :src="baseUrl + 'icon/girl.png'" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"
						v-if="ArtisterInfo.UserSex && JSON.parse(ArtisterInfo.UserSex).value == 0"></image>

					<ztAuthLabel height="32" size="20" v-if="ArtisterInfo.isAuthOk == 2"></ztAuthLabel>
					<ZtPersonalityLabel height="32" size="20" v-if="ArtisterInfo.BeautifulWomen == 1">
					</ZtPersonalityLabel>
					<image :src="baseUrl + 'icon/enterprise.png'" style="width: 34rpx;height: 34rpx;margin-left: 10rpx;"
						v-if="CompanyInfoState.isAuthOk == 2"></image>
				</view>

				<view class="artLabelBox flexbc" style="margin-top: 10rpx;">
					<view style="font-size:26rpx;color:#696969" v-if="ArtisterInfo.PublicRoles != null">
						<span v-for="(item, index) in ArtisterInfo.PublicRoles" :key="index">
							{{ item.LabelName }} <text style="padding: 0 10rpx;"
								v-if="index != ArtisterInfo.PublicRoles.length - 1">·</text><text v-else
								style="padding: 0 10rpx;">|</text>
						</span>
						<span> {{ ArtisterInfo.UserCity }}</span>
					</view>
				</view>
				<view style="font-size:26rpx;margin-top: 10rpx"
					v-if="CompanyInfoState.isAuthOk == 2 && CompanyInfoState.Info">
					<text>认证企业：</text>
					<text style="color: #00aaff"
						@click="$common.goNavPage(`/artistesPages/pages/enterpriseDetail?ArtisterID=${ArtisterInfo.UserID}`)">{{ CompanyInfoState.Info.CompanyAllName }}</text>
				</view>
				<view v-if="ArtisterInfo.isArtister == 0 && ArtisterInfo.UserMemo"
					style="font-size:26rpx;color:#999;margin-top: 10rpx;">
					{{ArtisterInfo.UserMemo}}
				</view>
				<view style="padding-top:20rpx;display: flex;flex-direction: row;align-items: center;">
					<!-- <view style="font-size: 26rpx;color:#999;margin-right:20rpx;">人气 <text style="font-size: 30rpx;margin-left: 8rpx;color: #000;">85</text></view>
					<view style="font-size: 26rpx;color:#999;margin-right:20rpx;">粉丝 <text style="font-size: 30rpx;margin-left: 8rpx;color: #000;">5</text></view>
					<view style="font-size: 26rpx;color:#999;">赞 <text style="font-size: 30rpx;margin-left: 8rpx;color: #000;">1</text></view> -->

					<view style="font-size: 26rpx;color:#999;margin-right:20rpx;">人气 <text
							style="font-size: 30rpx;margin-left: 8rpx;color: #000;">{{ UserCount.renqi }}</text></view>
					<view style="font-size: 26rpx;color:#999;margin-right:20rpx;">粉丝 <text
							style="font-size: 30rpx;margin-left: 8rpx;color: #000;">{{ UserCount.fensi }}</text></view>
					<view style="font-size: 26rpx;color:#999;margin-right:20rpx;">赞 <text
							style="font-size: 30rpx;margin-left: 8rpx;color: #000;">{{ UserCount.huozan }}</text></view>
					<view style="font-size: 26rpx;color:#999;">礼物 <text
							style="font-size: 30rpx;margin-left: 8rpx;color: #000;">{{ UserCount.meili }}</text></view>
				</view>
			</view>
		</view>

		<view class="artisterPages" v-if="ArtisterInfo.isArtister == 0">
			<view class="artisterTab">
				<fui-tabs :tabs="bArtisterPages" :current="tabIndex" @change="changePages" selectedColor="#000"
					sliderBackground="#FFDD00"></fui-tabs>
			</view>

			<swiper :current="tabIndex" :duration="300" @change="tabChange" style="height:1260rpx">
				<swiper-item class="fui-swiper__item">
					<scroll-view :show-scrollbar="false" :scroll-y="scrollok" style="height: 1257rpx;"
						@scrolltolower="onPullUpLoading(2)">
						<view>
							<view v-if="WorksList.length != 0" class="waterfall">
								<view v-for="(item,key) in WorksList" :key="key" class="waterfall-item"
									style="padding: 20rpx 30rpx;"
									@click="$common.goNavPage('/works/details?WorksID='+item.WorksID)">
									<view v-if="item.WorksUrls && JSON.parse(item.WorksUrls).length != 0"
										style="width: 100%;display: flex;flex-wrap: wrap;">
										<image v-for="(j, k) in JSON.parse(item.WorksUrls)" :key="k" :src="j"
											mode="aspectFill" class="words-image" :style="{
												width: JSON.parse(item.WorksUrls).length > 2? 'calc((100% - 20rpx) / 3)' : 'calc((100% - 20rpx) / 2)',
												height:'240rpx',
												marginRight: JSON.parse(item.WorksUrls).length > 2 && (k + 1) % 3 == 0 ||  JSON.parse(item.WorksUrls).length <= 2 && (k + 1) % 2 == 0 ? '0' : '10rpx',
												marginTop: '10rpx'
											}" @click.stop="onPreview(JSON.parse(item.WorksUrls), k)">
										</image>
									</view>
									<view style="font-size: 30rpx;margin-top: 15rpx;font-weight: bold;"
										v-if="item.WorkName">{{item.WorkName}}</view>
									<view
										style="font-size: 26rpx;color: #b7b7b7; margin-top: 20rpx;letter-spacing: 2rpx;"
										v-if="item.WorkMemo">{{item.WorkMemo}}</view>

									<view style="display: flex;flex-wrap: wrap;margin-top: 25rpx;">
										<view
											style="margin-right: 15rpx;padding: 8rpx; 14rpx;background-color: #e4e4e4;font-size: 22rpx;border-radius: 5rpx;"
											v-for="(j, k) in item.WorkLabels" :key="k">
											{{j.LabelName}}
										</view>
									</view>
									<view style="margin-top: 25rpx;border-top: 1rpx solid #f0f0f0;"></view>
									<view
										style="display: flex;justify-content: space-between;font-size: 24rpx;color: #d6d6d6;margin-top: 20rpx;">
										<view>
											{{ $common.timeDiff(item.addTime) }}
										</view>
										<view>
											阅读 {{JSON.parse(item.isReadUser).length}}
										</view>
									</view>

								</view>
								<uni-load-more :status="more"></uni-load-more>
							</view>
							<view
								style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 30rpx;"
								v-else>
								<view class="">
									<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
									<view class="" style="text-align: center;">
										暂无作品
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="fui-swiper__item">
					<scroll-view :show-scrollbar="false" :scroll-y="scrollok" style="height: 1257rpx"
						@scrolltolower="onPullUpLoading(3)">
						<view>
							<view class="" v-if="NoticeList.length !== 0">
								<view class="indexBox" v-for="(item,key) in NoticeList" :key="key"
									@click="$common.goNavPage('/notice/details?NoticeID='+item.NoticeID)">
									<view class="flexbc">
										<view class="noticeTitle">
											<text>{{ item.ClassName }}</text>
											<text style="margin-left:0rpx">・</text>
											<text v-if="item.PriceType && JSON.parse(item.PriceType).value === 1">
												<text>¥</text>
												<text v-if="item.PriceQujian === 0">{{ item.Price|formatPrice }}</text>
												<text v-else>{{ item.StartPrice|formatPrice }} ~
													{{ item.EndPrice|formatPrice }}</text>
												<text>{{ JSON.parse(item.Unit).text}}</text>
											</text>
											<text v-else>{{ JSON.parse(item.PriceType).result }}</text>
										</view>
										<view style="display: flex; align-items: center;">
											<fui-icon name="location" :size="30"></fui-icon>
											<text class="onCity">{{ item.City }}</text>
										</view>
									</view>
									<view class="flexbc">
										<view class="leftTexts">
											<view class="noticeMemo">{{item.NoticeMemo}}</view>
											<view class="userlabel">
												<view>{{ item.NoticeTarget.LabelName }}</view>
												<view>性别要求：{{ item.SexLimit ? JSON.parse(item.SexLimit).text : '' }}
												</view>
											</view>
											<view class="userInfo">
												<view class="userHeadPic">
													<image :src="item.Publicer.WxHeadPic"></image>
												</view>
												<view class="userNicker">{{item.Publicer.NickName}}</view>
												<image :src="baseUrl + 'icon/authed.png'" class="authed"
													v-if="item.Publicer.isAuthOk == 1"></image>
											</view>
										</view>
										<view class="rightPic">
											<image :src="item.NoticePics ? JSON.parse(item.NoticePics)[0] : ''"
												mode="aspectFill"></image>
										</view>
									</view>
									<view class="indexBoxBottom flexbc">
										<view>
											{{ $common.timeDiff(item.showTime,new Date()) }}
										</view>
										<view class="indexBoxCount flexbc">
											<view class="getBaoming">
												<view style="float:left">
													<image :src="baseUrl + 'icon/mail.png'" class="mailicon"></image>
												</view>
												<view style="float:left"><text>{{ item.BaomingCount }}</text></view>
											</view>
											<view class="readcount">
												<view style="float:left">
													<image :src="baseUrl + 'icon/show.png'" class="showicon"></image>
												</view>
												<view style="float:left"><text>{{ item.ReadCount }}</text></view>
											</view>
										</view>
									</view>
								</view>
								<uni-load-more :status="more"></uni-load-more>
							</view>

							<!-- <view class="noneInfos" v-else>暂无信息</view> -->
							<view
								style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 30rpx;"
								v-else>
								<view class="">
									<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
									<view class="" style="text-align: center;">
										暂无通告
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<view class="artisterPages" v-if="ArtisterInfo.isArtister == 1">

			<view class="artisterTab">
				<fui-tabs :tabs="aArtisterPages" :current="tabIndex" @change="changePages" selectedColor="#000"
					sliderBackground="#FFDD00"></fui-tabs>
			</view>


			<swiper :current="tabIndex" :duration="300" @change="tabChange" style="height:1300rpx">
				<swiper-item class="fui-swiper__item">
					<scroll-view :show-scrollbar="false" :scroll-y="scrollok" style="height:1257rpx"
						@scrolltoupper="onScrolltoupper" @scroll="scrollView">
						<view>
							<view class="artisterBaseInfo artisterBox"
								style="margin:0rpx;border-top:1rpx solid #f0f0f0">
								<view class="flexbc">
									<span class="artisterInfoTitle">形象信息</span>
									<span class="editBtn" @click="goNavPage('/myPages/pages/editBaseInfo')">编辑</span>
								</view>
								<view class="flexbc" v-if="UserBaseinfo !== null">
									<view style="font-size:24rpx;text-align:center;padding:20rpx;">
										<view>{{ UserBaseinfo.shengao }}</view>
										<view>身高</view>
									</view>
									<view style="font-size:24rpx;text-align:center;padding:20rpx;">
										<view>{{ UserBaseinfo.tizhong }}</view>
										<view>体重</view>
									</view>
									<view style="font-size:24rpx;text-align:center;padding:20rpx;">
										<view v-if="UserBaseinfo.sanwei[0] == undefined"></view>
										<view v-else>
											{{ UserBaseinfo.sanwei[0] }}-{{ UserBaseinfo.sanwei[1] }}-{{ UserBaseinfo.sanwei[2] }}
										</view>
										<view>三围</view>
									</view>
									<view style="font-size:24rpx;text-align:center;padding:20rpx;"
										v-if="ArtisterInfo.UserSex && JSON.parse(ArtisterInfo.UserSex).value == 0">
										<view>{{ UserBaseinfo.zhaobei }}</view>
										<view>罩杯</view>
									</view>
									<view style="font-size:24rpx;text-align:center;padding:20rpx;">
										<view>{{ UserBaseinfo.jiaoma }}</view>
										<view>鞋码</view>
									</view>
								</view>
							</view>

							<view class="artisterPhoto artisterBox" style="height:auto;">
								<view class="flexbc">
									<span class="artisterInfoTitle">自我简介</span>
									<span class="editBtn" @click="goNavPage('/myPages/pages/editMemo')">编辑</span>
								</view>
								<view style="background-color:#FFF;padding:15rpx;margin-top:30rpx;color:#999"
									v-if="ArtisterInfo.UserMemo">
									{{ ArtisterInfo.UserMemo }}
								</view>
							</view>

							<view class="artisterPhoto artisterBox" style="height:400rpx;">
								<view class="flexbc">
									<span class="artisterInfoTitle">形象视频</span>
									<!-- <span @click="goNavPage('/myPages/pages/editVideo')">编辑</span> -->
								</view>
								<view style="padding:30rpx;">
									<fui-upload-video immediate :url="videoUpUrl" :fileList="videoUrls" ref="upload"
										@success="success" @error="error" @complete="complete"></fui-upload-video>
								</view>
							</view>

							<view class="artisterPhoto artisterBox" style="height:auto;">
								<view class="flexbc">
									<span class="artisterInfoTitle">形象照片</span>
									<span class="editBtn" @click="goNavPage('/myPages/pages/editPhoto')">编辑</span>
								</view>

								<view class="artPics" v-if="UserPhotos !== null">
									<view class="artPic" v-for="(item,index) in UserPhotos" :key="index"
										v-if="index < 3" @click="showPhoto(UserPhotos, index, 0)">
										<!-- <image :src="item" mode="aspectFit" @click="item"></image> -->
										<zero-lazy-load borderRadius="10" height="300" :image="item"
											imgMode='aspectFill'></zero-lazy-load>
										<!--<view class="" v-if="index == 2" style="display: table-cell;vertical-align: middle;">
											 <view class="artPicCount" v-if="UserPhotos.length > 3">
											<uni-icons type="image" size="14" color="#fff"></uni-icons>
											<text style="margin-left: 5rpx;">{{UserPhotos.length  }}</text>
											</view> 
										</view>-->

										<view class="" v-if="index == 2 &&  UserPhotos.length > 3"
											style="width: 70rpx;height: 70rpx;background: gold;clip-path: polygon(100% 0%, 0 100%, 100% 100%);position: absolute;bottom: 0;right: 0;border-radius: 0 0 10rpx 0;">
											<text
												style="position: absolute;bottom: 4rpx;right: 4rpx;font-size: 24rpx;">{{ UserPhotos.length }}张</text>
										</view>

									</view>
								</view>

								<!-- <view class="artPics" v-if="UserPhotos !== null" @click="showPhoto(UserPhotos)">
									<view class="artPic" v-for="(item,index) in UserPhotos" :key="index">
										<image :src="item" mode="aspectFill"></image>
									</view>
								</view> -->


							</view>

							<view class="artisterPhoto artisterBox" style="height:200rpx;">
								<view class="flexbc">
									<span class="artisterInfoTitle">我的私密空间</span>
								</view>
								<view class="artVipPics">
									<text>仅VIP会员可见</text><br>
									<button class="vipEditBtn"
										@click="goNavPage('/myPages/pages/vipPage?artisterID='+ArtisterID)">编辑</button>
								</view>
							</view>

							<view class="artisterPhoto artisterBox" style="height:auto;">
								<view class="flexbc">
									<span class="artisterInfoTitle">身份标签</span>
									<span class="editBtn" @click="goNavPage('/myPages/pages/roleLabelSet')">编辑</span>
								</view>
								<view style="padding-top:20rpx;">
									<view class="label" v-for="(item,index) in SetRoleLabels" :key="index">
										{{ item.text }}
									</view>
								</view>
								<view style="clear:both"></view>
							</view>

							<view class="artisterPhoto artisterBox" style="height:auto;">
								<view class="flexbc">
									<span class="artisterInfoTitle">接单通告</span>
									<span class="editBtn" @click="goNavPage('/myPages/pages/NoticeLabelSet')">编辑</span>
								</view>
								<view style="padding-top:20rpx;">
									<view v-for="(item,index) in MyNoticeLabels" :key="index"
										:class="item.vip?'viplabel':'label'">
										{{ item.text }}
									</view>
									<view style="clear:both">
										<view v-for="(item,index) in MyPingmianLabels" :key="index">
											<view :class="itm.vip?'viplabel':'label'" v-for="(itm,idx) in item.Labels"
												:key="idx">
												{{ itm.text }}
											</view>
										</view>
									</view>
								</view>
								<view style="clear:both"></view>
							</view>

							<view class="artisterPhoto artisterBox" style="height:auto;">
								<view class="flexbc">
									<span class="artisterInfoTitle">形象风格</span>
									<span class="editBtn"
										@click="goNavPage('/myPages/pages/xingxiangLabelSet')">编辑</span>
								</view>
								<view style="padding-top:20rpx;">
									<view class="label" v-for="(item,index) in xingxiangLabels" :key="index">
										{{ item.text }}
									</view>
								</view>
								<view style="clear:both"></view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 模卡 -->
				<swiper-item class="fui-swiper__item">
					<scroll-view :show-scrollbar="false" :scroll-y="scrollok" style="height: 1257rpx"
						@scrolltolower="onPullUpLoading(1)">
						<!-- <view> -->
						<view v-if="MokaList.length != 0" class="waterfall">
							<view v-for="(item,key) in MokaList" :key="key" class="waterfall-item"
								style=" display: flex;justify-content: center;align-items: center;"
								@click="showPhoto(MokaList, key, 1)">
								<image :src="item.MokaOkUrl" mode="widthFix"></image>
							</view>
							<uni-load-more :status="more"></uni-load-more>
						</view>
						<!-- <view class="noneInfos" v-else>暂无信息</view> -->
						<view
							style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 30rpx;"
							v-else>
							<view class="">
								<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
								<view class="" style="text-align: center;">
									暂无信息
								</view>
							</view>
						</view>
						<!-- </view> -->
					</scroll-view>
				</swiper-item>
				<!-- 作品 -->
				<swiper-item class="fui-swiper__item">
					<scroll-view :show-scrollbar="false" :scroll-y="scrollok" style="height: 1257rpx;"
						@scrolltolower="onPullUpLoading(2)">
						<view>
							<view v-if="WorksList.length != 0" class="waterfall">
								<view v-for="(item,key) in WorksList" :key="key" class="waterfall-item"
									style="padding: 20rpx 30rpx;"
									@click="$common.goNavPage('/works/details?WorksID='+item.WorksID)">
									<view v-if="item.WorksUrls && JSON.parse(item.WorksUrls).length != 0"
										style="width: 100%;display: flex;flex-wrap: wrap;">
										<image v-for="(j, k) in JSON.parse(item.WorksUrls)" :key="k" :src="j"
											mode="aspectFill" class="words-image" :style="{
												width: JSON.parse(item.WorksUrls).length > 2? 'calc((100% - 20rpx) / 3)' : 'calc((100% - 20rpx) / 2)',
												height:'240rpx',
												marginRight: JSON.parse(item.WorksUrls).length > 2 && (k + 1) % 3 == 0 ||  JSON.parse(item.WorksUrls).length <= 2 && (k + 1) % 2 == 0 ? '0' : '10rpx',
												marginTop: '10rpx'
											}" @click.stop="onPreview(JSON.parse(item.WorksUrls), k)">
										</image>
									</view>
									<view style="font-size: 30rpx;margin-top: 15rpx;font-weight: bold;"
										v-if="item.WorkName">{{item.WorkName}}</view>
									<view
										style="font-size: 26rpx;color: #b7b7b7; margin-top: 20rpx;letter-spacing: 2rpx;"
										v-if="item.WorkMemo">{{item.WorkMemo}}</view>

									<view style="display: flex;flex-wrap: wrap;margin-top: 25rpx;">
										<view
											style="margin-right: 15rpx;padding: 8rpx; 14rpx;background-color: #e4e4e4;font-size: 22rpx;border-radius: 5rpx;"
											v-for="(j, k) in item.WorkLabels" :key="k">
											{{j.LabelName}}
										</view>
									</view>
									<view style="margin-top: 25rpx;border-top: 1rpx solid #f0f0f0;"></view>
									<view
										style="display: flex;justify-content: space-between;font-size: 24rpx;color: #d6d6d6;margin-top: 20rpx;">
										<view>
											{{ $common.timeDiff(item.addTime) }}
										</view>
										<view>
											阅读 {{item.ReadCount}}
										</view>
									</view>

								</view>
								<uni-load-more :status="more"></uni-load-more>
							</view>
							<!-- <view class="noneInfos" v-else>暂无信息</view> -->
							<view
								style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 30rpx;"
								v-else>
								<view class="">
									<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
									<view class="" style="text-align: center;">
										暂无信息
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 通告 -->
				<swiper-item class="fui-swiper__item">
					<scroll-view :show-scrollbar="false" :scroll-y="scrollok" style="height: 1257rpx"
						@scrolltolower="onPullUpLoading(3)">
						<view>
							<view class="" v-if="NoticeList.length !== 0">
								<view class="indexBox" v-for="(item,key) in NoticeList" :key="key"
									@click="$common.goNavPage('/notice/details?NoticeID='+item.NoticeID)">
									<view class="flexbc">
										<view class="noticeTitle">
											<text>{{ item.ClassName }}</text>
											<text style="margin-left:0rpx">・</text>
											<text v-if="item.PriceType && JSON.parse(item.PriceType).value === 1">
												<text>¥</text>
												<text v-if="item.PriceQujian === 0">{{ item.Price|formatPrice }}</text>
												<text v-else>{{ item.StartPrice|formatPrice }} ~
													{{ item.EndPrice|formatPrice }}</text>
												<text>{{ JSON.parse(item.Unit).text}}</text>
											</text>
											<text v-else>{{ JSON.parse(item.PriceType).result }}</text>
										</view>
										<view style="display: flex; align-items: center;">
											<fui-icon name="location" :size="30"></fui-icon>
											<text class="onCity">{{ item.City }}</text>
										</view>
									</view>
									<view class="flexbc">
										<view class="leftTexts">
											<view class="noticeMemo">{{item.NoticeMemo}}</view>
											<view class="userlabel">
												<view>{{ item.NoticeTarget.LabelName }}</view>
												<view>性别要求：{{ item.SexLimit ? JSON.parse(item.SexLimit).text : '' }}
												</view>
											</view>
											<view class="userInfo">
												<view class="userHeadPic">
													<image :src="item.Publicer.WxHeadPic"></image>
												</view>
												<view class="userNicker">{{item.Publicer.NickName}}</view>
												<image :src="baseUrl + 'icon/authed.png'" class="authed"
													v-if="item.Publicer.isAuthOk == 1"></image>
											</view>
										</view>
										<view class="rightPic">
											<image :src="item.NoticePics ? JSON.parse(item.NoticePics)[0] : ''"
												mode="aspectFill"></image>
										</view>
									</view>
									<view class="indexBoxBottom flexbc">
										<view>
											{{ $common.timeDiff(item.showTime,new Date()) }}
										</view>
										<view class="indexBoxCount flexbc">
											<view class="getBaoming">
												<view style="float:left">
													<image :src="baseUrl + 'icon/mail.png'" class="mailicon"></image>
												</view>
												<view style="float:left"><text>{{ item.BaomingCount }}</text></view>
											</view>
											<view class="readcount">
												<view style="float:left">
													<image :src="baseUrl + 'icon/show.png'" class="showicon"></image>
												</view>
												<view style="float:left"><text>{{ item.ReadCount }}</text></view>
											</view>
										</view>
									</view>
								</view>
								<uni-load-more :status="more"></uni-load-more>
							</view>

							<!-- <view class="noneInfos" v-else>暂无信息</view> -->
							<view
								style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 30rpx;"
								v-else>
								<view class="">
									<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
									<view class="" style="text-align: center;">
										暂无信息
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<fui-gallery :current="currentIndex" :urls="photoUrls" :show="photoShow" @hide="hideGallery"></fui-gallery>
		<view style="height:120rpx;background-color:#f0f0f0;"></view>
		<fui-toast ref="toast"></fui-toast>
	</view>
</template>

<script>
	import ztAuthLabel from "@/components/authLabel.vue";
	import ZtPersonalityLabel from "@/components/personalityLabel.vue";
	import ZtHeadWear from "@/components/headwear.vue"

	export default {
		components: {
			ztAuthLabel,
			ZtPersonalityLabel,
			ZtHeadWear
		},
		filters: {
			formatPrice(price) {
				if (price > 10000) {
					return price / 10000 + 'w';
				} else if (price > 1000) {
					return price / 1000 + 'k'
				} else {
					return parseInt(price, 10);
				}
			}
		},
		data() {
			return {
				UserCount: {},
				bigBoxStyle: {},
				scrollok: false,
				ArtisterID: 0,
				noBackgroundPic: true,
				bArtisterPages: [{
						name: '作品'
					},
					{
						name: '通告'
					}
				],
				aArtisterPages: [{
						name: '主页'
					},
					{
						name: '模卡'
					},
					{
						name: '作品'
					},
					{
						name: '通告'
					}
				],
				tabIndex: 0,
				ArtisterInfo: {
					BackgroundPic: 'https://img.1ppt.com/uploads/allimg/1902/1_190213153422_2.JPG'
				},
				UserBaseinfo: {},
				UserVideos: [],
				UserPhotos: [],
				UserVipPhotos: [],
				SetRoleLabels: [],
				xingxiangLabels: [],
				MyNoticeLabels: [],
				MyPingmianLabels: [],
				WorksList: [],
				MokaList: [],
				//上传接口地址
				videoUpUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=video',
				//上传状态，用于保存或其他操作时做判断
				status: '',
				//上传的视频地址列表
				videoUrls: [],
				photoUrls: [],
				photoShow: false,
				// 通告数据
				NoticeList: [],
				ListType: -1,
				// 是否显示裁切组件
				isShowTailor: false,
				// 图片路径
				TailorSrc: '',

				mokaPage: 1,
				WorksPage: 1,
				NoticePage: 1,
				more: '',

				currentIndex: 0,
				// 是否裁剪
				isCropping: false,

				baseUrl: '',
				// 企业信息
				CompanyInfoState: {},

			};
		},
		onLoad(options) {
			this.baseUrl = this.$baseUrl;
			this.ArtisterID = options.artisterID;
			const query = uni.createSelectorQuery().in(this);
			query
				.select(".artisterBg")
				.boundingClientRect((data) => {
					this.bigBoxStyle = data;
				})
				.exec();
			let time = 80
			// #ifdef H5
			time = 200
			// // #endif
			setTimeout(() => {
				// this.height = uni.getSystemInfoSync().windowHeight;
				// #ifdef MP
				// this.getStatus().then((res) => {})
				// #endif
			}, time)

			this.height = uni.getSystemInfoSync().windowHeight;
			// console.log('this.height', this.height)
		},
		onShow() {
			this.mokaPage = 1;
			this.WorksPage = 1;
			this.NoticePage = 1;
			// this.height = 5100;
			this.getArtister();
			// console.log('UserPhotos', this.UserPhotos)
		},
		onPageScroll(e) {
			// // console.log('页面滚动距离：', e.scrollTop);
			if (e.scrollTop >= 326) {
				this.scrollok = true
			} else {
				this.scrollok = false
			}
		},
		methods: {
			// 预览
			onPreview(imageList, index) {
				// console.log('imageList', imageList)
				// return;
				uni.previewImage({
					urls: imageList,
					current: index,
				})
			},
			scrollView(event) {
				if (event.detail.scrollTop == 0) {
					this.scrollok = false;
				} else {
					this.scrollok = true;
				}
				// console.log(event)
			},
			onScrolltoupper(event) {
				// console.log(event)
				if (event.detail.direction = "top") {
					this.scrollok = false
				}
			},
			onPullUpLoading(index) {
				switch (index) {
					case 1:
						this.mokaPage += 1;
						this.getPageMokaList()
						break;
					case 2:
						this.WorksPage += 1;
						this.getPageWorksList()
						break;
					case 3:
						this.NoticePage += 1;
						this.getPageNoticeList()
						break;
				}
			},
			//  旋转剪切
			onRotateTailor() {
				this.$refs.tailor && this.$refs.tailor.rotate()
			},

			//  确定剪切
			async onSubmitTailor(fileImage) {
				// console.log('TailorSrc', this.TailorSrc)

				// console.log('file', fileImage)
				if (this.isCropping) {
					this.isCropping = false;
					this.$httpost('/UserAction/modUserBgpic', {
						bgPic: await this.uploadImage(fileImage.path)
					}).then(res => {
						if (res.code == 200) {
							this.getArtister();
							uni.hideLoading()
							this.isShowTailor = false;
						}
					})
				}


			},

			// 上传背景图
			updatebackground() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择,
					success: async (res) => {
						// this.uploadImage(res.tempFilePaths[0])
						this.isCropping = true;

						this.TailorSrc = res.tempFilePaths[0]
						// this.TailorSrc = await this.uploadImage(res.tempFilePaths[0])
						this.isShowTailor = true
					},
					fail(err) {
						this.isCropping = false;
						// console.log('err 取消了',err)
					}
				})

			},
			uploadImage(tmpFile) {
				return new Promise((reslove, reject) => {
					uni.uploadFile({
						url: 'https://api.meimo.comdns.cn/common/Upload/upload?file=userbase&type=image',
						filePath: tmpFile,
						name: "file",
						formData: {},
						success: (uploadFileRes) => {
							reslove(this.$baseUrl + JSON.parse(uploadFileRes.data).fileName)
						}
					})
				})
			},
			showPhoto(photos, index, isType) {
				// console.log(photos);
				var photoUrls = [];
				if (isType == 1) {
					photos.forEach(item => {
						if (!!item.MokaOkUrl) photoUrls.push(item.MokaOkUrl);
					})
				} else {
					photoUrls = [...photoUrls, ...photos];
				}
				uni.previewImage({
					current: index,
					urls: photoUrls,
					showmenu: true,
				})
			},
			hideGallery() {
				this.photoShow = false;
			},
			//上传成功时触发
			success(e) {
				// console.log(e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.status = e.status
				if (res.fileName) {
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的视频地址
					//e.index为视频索引值
					this.$refs.upload.result(this.$baseUrl + res.fileName, e.index)
				}
			},
			//上传失败时触发
			error(e) {
				this.status = e.status
			},
			//选择视频或上传完成时触发
			complete(e) {

				// console.log(e)

				this.status = e.status
				this.urls = e.urls

				if (this.status === 'success' && e.action === 'upload') {
					// this.fui.toast('上传完成！')
					//已上传完成的视频列表 this.urls
					// console.log(this.urls)

					this.$httpost('/UserAction/saveMyVideo', {
						uploadUrls: this.urls
					}).then(res => {
						if (res.code == 200) {}
					});
				} else if (e.action === 'delete') {
					this.$httpost('/UserAction/deleteMyVideo', {}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '视频已删除',
								icon: 'none'
							})
						}
					});
				}
			},
			goNavPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			gotoEdit() {
				this.$common.goNavPage('/myPages/pages/editmyinfo')
			},
			goBack() {
				this.$common.goSwtPage('/pages/my/index')
			},
			changePages(e) {
				this.page = 1;
				// console.log(e)
				this.switchTab(e.index)
			},
			tabChange(e) {
				// console.log(e)
				if (e.detail.source == 'touch') {
					let index = e.target.current || e.detail.current;
					this.switchTab(index);
				}
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
			},
			getArtister() {
				this.$httpost('/Artister/info', {
					ArtisterID: this.ArtisterID,
					ShowType: ''
				}).then(res => {
					// console.log('info', res)
					if (res.code == 200) {
						this.ArtisterInfo = res.data.ArtisterInfo;
						this.CompanyInfoState = res.data.CompanyInfoState;
						this.UserCount = res.data.UserCount;
						if (!res.data.ArtisterInfo.BackgroundPic) {
							this.noBackgroundPic = true;
							this.ArtisterInfo.BackgroundPic =
								'https://img.1ppt.com/uploads/allimg/1902/1_190213153422_2.JPG';
						} else {
							this.noBackgroundPic = false;
						}

						if (JSON.parse(res.data.ArtisterInfo.SetRoleLabels) != null) {
							this.SetRoleLabels = JSON.parse(this.ArtisterInfo.SetRoleLabels)
						}
						if (JSON.parse(res.data.ArtisterInfo.xingxiangLabels) != null) {
							this.xingxiangLabels = JSON.parse(this.ArtisterInfo.xingxiangLabels)
						}
						if (JSON.parse(res.data.ArtisterInfo.UserBaseinfo) != null) {
							this.UserBaseinfo = JSON.parse(res.data.ArtisterInfo.UserBaseinfo);
						}
						if (res.data.ArtisterInfo.UserPhotos.length !== 0) {
							this.UserPhotos = res.data.ArtisterInfo.UserPhotos;
						}
						if (JSON.parse(res.data.ArtisterInfo.UserVideos) != null) {
							this.videoUrls = JSON.parse(res.data.ArtisterInfo.UserVideos);
						}
						if (JSON.parse(res.data.ArtisterInfo.MyNoticeLabels) != null) {
							this.MyNoticeLabels = JSON.parse(res.data.ArtisterInfo.MyNoticeLabels);
						}
						if (JSON.parse(res.data.ArtisterInfo.MyPingmianLabels) != null) {
							this.MyPingmianLabels = JSON.parse(res.data.ArtisterInfo.MyPingmianLabels);
						}

						const Wallet = res.data.Wallet

						if (Wallet.WalletID !== 0) {
							let options = {}
							options.text = '恭喜您获得 ' + Math.round(Wallet.WalletMoney) + ' 金币';
							options.src = this.$baseUrl + "icon/goldcoin.png";
							this.$refs.toast.show(options)
						}
					}
				})

				// this.$httpost('/Artister/works', {ArtisterID:this.ArtisterID}).then(res => {
				// 	// console.log('works', res)
				// 	if (res.code == 200) {
				// 		this.WorksList = res.data.WorksList;
				// 		// console.log('WorksList', this.WorksList.length)
				// 	}
				// })

				// this.$httpost('/Artister/moka', {ArtisterID:this.ArtisterID}).then(res => {
				// 	// console.log('moka', res)
				// 	if (res.code == 200) {
				// 		if (this.MokaList.length != 0) {
				// 			this.MokaList = [...this.MokaList, ...res.data.MokaList]; 
				// 			if (res.data.MokaList.length == 0) this.more = 'onMore';
				// 		} else {
				// 			this.MokaList = res.data.MokaList;
				// 			this.more = 'more';
				// 		}

				// 		// console.log('MokaList', this.MokaList)
				// 	}
				// })
				// this.getWorksList()
				// this.getMokaList()
				// this.getNoticeList()
				this.onePageWorksList()
				this.onePageMokaList()
				this.onePageNoticeList()
			},
			// 获取作品列表
			getPageWorksList() {
				this.more = 'loading';
				this.$httpost('/Artister/works', {
					ArtisterID: this.ArtisterID,
					page: this.WorksPage
				}).then(res => {
					// console.log('works', res)
					if (res.code == 200) {
						if (this.WorksList.length != 0) {
							this.WorksList = [...this.WorksList, ...res.data.WorksList];
							if (res.data.WorksList.length == 0) this.more = 'onMore';
						} else {
							this.WorksList = res.data.WorksList;
							this.more = ''
						}
						// console.log('getPageWorksList WorksList', this.WorksList)
					}
				})
			},
			onePageWorksList() {
				this.more = 'loading';
				this.$httpost('/Artister/works', {
					ArtisterID: this.ArtisterID,
					page: 1
				}).then(res => {
					// console.log('works', res)
					if (res.code == 200) {
						this.WorksList = res.data.WorksList;
						this.more = ''
					}
				})
			},
			// 获取moka列表
			getPageMokaList() {
				this.$httpost('/Artister/moka', {
					ArtisterID: this.ArtisterID,
					page: this.mokaPage,
				}).then(res => {
					// console.log('moka', res)
					if (res.code == 200) {
						// 判断当前模卡列表中是否已经生成模卡
						let list = res.data.MokaList.filter(item => !!item.MokaOkUrl)
						if (this.MokaList.length != 0) {
							this.MokaList = [...this.MokaList, ...list];
							if (list.length == 0) this.more = 'onMore';
						} else {
							this.MokaList = list;
							this.more = '';
						}

						// console.log('MokaList', this.MokaList)
					}
				})
			},
			// 获取第一页模卡数据
			onePageMokaList() {
				this.$httpost('/Artister/moka', {
					ArtisterID: this.ArtisterID,
					page: 1
				}).then(res => {
					// console.log('moka', res)
					if (res.code == 200) {
						// 判断当前模卡列表中是否已经生成模卡
						let list = res.data.MokaList.filter(item => !!item.MokaOkUrl)
						this.MokaList = list;
						this.more = '';
					}
				})
			},
			// 获取通告数据
			getPageNoticeList() {
				this.more = 'loading';
				this.$httpost('/UserCenter/myTonggao', {
					ListType: this.ListType,
					page: this.NoticePage
				}).then(res => {
					if (res.code == 200) {
						if (this.NoticeList.length != 0) {
							this.NoticeList = [...this.NoticeList, ...res.data.NoticeList];
							if (res.data.NoticeList.length == 0) this.more = 'onMore';
						} else {
							this.NoticeList = res.data.NoticeList;
							this.more = ''
						}
					}
				});
			},
			// 第一页通告数据
			onePageNoticeList() {
				this.more = 'loading';
				this.$httpost('/UserCenter/myTonggao', {
					ListType: this.ListType,
					page: 1
				}).then(res => {
					if (res.code == 200) {
						this.NoticeList = res.data.NoticeList;
						this.more = ''
					}
				});
			},
			interestBtn() {
				uni.showToast({
					title: '自己不能关注自己',
					icon: 'none'
				})
				// this.$httpost('/UserAction/guanzhuArtister', {ArtisterID:this.artisterID}).then(res => {
				// 	// console.log('guanzhu', res)
				// 	if (res.code == 200) {
				// 		// this.MokaList = res.data.MokaList;
				// 		// // console.log('MokaList', this.MokaList)
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	.indexBox {
		margin: auto;
		margin-top: 20rpx;
		width: auto;
		height: auto;
		background-color: #FFF;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.onCity {
		color: #999;
		margin-left: 10rpx;
		padding-bottom: 5rpx;
		font-size: 24rpx
	}

	.readed {
		font-size: 22rpx;
		color: #999;
		background-color: #dddddd;
		position: absolute;
		border-radius: 10rpx 0 10rpx 0;
		top: 0;
		left: 0;
		padding: 6rpx 10rpx;
	}

	.noticeTitle {
		font-size: 32rpx;
		color: #333;
		font-weight: bold
	}

	.noticeMemo {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.userlabel {
		display: flex;
		margin-top: 20rpx;
		/* justify-content:center; */
	}

	.userlabel view {
		background-color: #e0e0e0;
		color: #666;
		font-size: 18rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
		padding: 6rpx 10rpx 6rpx 10rpx;
	}

	.authed {
		width: 25rpx;
		height: 25rpx;
		margin-left: 10rpx
	}

	.mailicon {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx
	}

	.showicon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.userInfo {
		display: flex;
		margin-top: 20rpx;
		align-items: center;
	}

	.userHeadPic {
		width: 35rpx;
		height: 35rpx;
		background-color: #00cbff;
		border-radius: 35rpx;
	}

	.userHeadPic image {
		width: 35rpx;
		height: 35rpx;
		border-radius: 35rpx;
	}

	.userNicker {
		margin-left: 10rpx;
		font-size: 24rpx;
	}

	.rightPic {
		width: 160rpx;
		height: 160rpx;
		background-color: #CCC;
		// background-image: url('https://hbimg.huabanimg.com/e2f264f714b5e59a899535cb423bd1bd8498ef1e1184cb-eowWX4_fw658');
		background-size: cover;
		background-position: center;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.rightPic image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	.indexBoxBottom {
		clear: both;
		margin-top: 20rpx;
		padding-top: 20rpx;
		// padding-bottom:20rpx;
		border-top: 1rpx solid #f0f0f0;
		color: #CCC;
		font-size: 24rpx
	}

	.indexBoxCount {
		width: 180rpx;
		font-size: 24rpx
	}

	.getBaoming {
		width: 120rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.readcount {
		width: 100rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.artisterBg {
		width: 100%;
		height: 590rpx;
		// padding-top:300rpx;
		// background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658');
		background-size: cover;
		background-position: center center;
	}

	.goBack {
		position: absolute;
		z-index: 100;
	}

	.artisterTop {
		height: 215rpx;
	}

	.bgtext {
		// height: 300rpx;
		text-align: center;
		padding: 0 50rpx;
		// margin-top: 100rpx;
		color: #FF6600;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.artisterTitles {
		clear: both;
		// margin-top:-150rpx;
		background-color: #f0f0f0;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		position: relative;
		// height:260rpx;
	}

	.artisterHeadpic {
		position: absolute;
		top: -70rpx;
		left: 30rpx;
		width: 150rpx;
		height: 150rpx;
		// background-image: url('https://hbimg.b0.upaiyun.com/09c1ac7fa1083b0e1617603a2a23ab33309fc62738293-Yu4IWz_fw658');
		// background-size: cover;
		border-radius: 150rpx;
	}

	.interestBtn {
		width: 200rpx;
		height: 60rpx;
		border-radius: 100rpx;
		background-color: $globalColor;
		float: right;
		margin: 20rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.artisterInfo {
		clear: both;
		padding: 30rpx;
		padding-top: 0rpx;
	}

	.artisterCount {
		width: 50vw;
		padding: 20rpx;
	}

	.artisterPages {
		background-color: #f0f0f0;
	}

	.artisterTab {
		display: flex;
		background-color: #FFF;
		justify-content: center;
		// position: sticky;
		// top: 30rpx;
	}

	.tabItem {
		width: 150rpx;
		padding: 10rpx;
		text-align: center;
	}

	.artisterBox {
		clear: both;
		height: auto;
		padding: 20rpx;
		background-color: #FFF;
		margin-top: 15rpx;
	}

	.artisterInfoTitle {
		font-weight: bold;
		font-size: 30rpx;
	}

	.label {
		float: left;
		width: auto;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #CCC;
		border-radius: 10rpx;
		font-size: 24rpx;
		margin: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.viplabel {
		float: left;
		width: auto;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #FF6600;
		color: #FFF;
		border: 1rpx solid #CCC;
		border-radius: 10rpx;
		font-size: 24rpx;
		margin: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.artisterBottom {
		background-color: #FFF;
		position: fixed;
		z-index: 1000;
		width: 100%;
		height: 120rpx;
		border-top: 1rpx solid #e0e0e0;
		bottom: 0;
	}

	.contact {
		width: 250rpx;
		height: 60rpx;
		background-color: #666;
		color: #FFF;
		border-radius: 10rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 10rpx;
	}

	.waterfall {
		padding-top: 20rpx;
	}

	.waterfall-item {
		// width:auto;height:auto;
		background: #FFF;
		padding: 20rpx;
		margin-bottom: 20rpx;
		// 	width: calc(33.33% - 20px);
		// 	margin: 0 10px;
		// 	box-sizing: border-box;
		// 	overflow: hidden;
		// display: flex;
		// justify-content: center;
		// align-items: center;
	}

	.waterfall-img {
		width: 100%;
		height: 100%;
	}

	.sendMsg {
		width: 250rpx;
		height: 60rpx;
		background-color: #FFCC00;
		color: #FFF;
		border-radius: 10rpx;
		line-height: 60rpx;
		text-align: center;
		margin: 10rpx;
	}

	.labels {
		padding: 10rpx;
		border: 1rpx solid #CCC;
		border-radius: 10rpx;
		float: left;
		margin: 20rpx;
	}

	.artPics {
		clear: both;
		display: flex;
		// justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 40rpx;
		position: relative;
	}

	.artPicCount {
		// position: absolute;
		// z-index: 200;
		// bottom:0rpx;
		// right:0px;
		// width:60rpx;height:30rpx;padding:5rpx;background-color:rgba(0, 0, 0, 0.5);
		// color:#FFF;
		// text-align: center;
		// border-radius: 10rpx;
		// font-size:20rpx;


		position: absolute;
		z-index: 200;
		bottom: 0rpx;
		right: 0px;
		width: 60rpx;
		height: 30rpx;
		padding: 5rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFF;
		text-align: center;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.artVipPics {
		padding: 30rpx;
		text-align: center;
	}

	.artPic {
		width: calc((100% - 60rpx) / 3);
		// height:279rpx;
		background-color: #999;
		// margin:10rpx;
		margin-top: 10rpx;
		position: relative;
		border-radius: 5rpx;
		font-size: 20rpx;
		margin-right: 30rpx;

		&:nth-child(3) {
			margin-right: 0;
		}
	}

	.vipEditBtn {
		margin: auto;
		margin-top: 20rpx;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: $globalColor;
		color: #000;
		border-radius: 10rpx;
		font-size: 24rpx;
		text-align: center;

		&::after {
			border: none;
		}
	}

	.artPic image {
		width: 100%;
		height: 300rpx;
		border-radius: 5rpx;
	}

	.bottomBtns {
		position: fixed;
		z-index: 1000;
		bottom: 0rpx;
		left: 0;
		right: 0;
		padding: 0 20rpx;
		height: 130rpx;
		background-color: #FFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		padding-top: 20rpx;
	}

	.bottomEditBtn {
		flex: 3;
		height: 70rpx;
		border: 1rpx solid $globalColor;
		background-color: $globalColor;
		color: #000;
		border-radius: 10rpx;
		text-align: center;
		line-height: 70rpx;
		margin-right: 25rpx;
	}

	.showBtn {
		flex: 1;
		height: 70rpx;
		background-color: #FFF;
		color: #000;
		border: 1rpx solid #8c8c8c;
		border-radius: 10rpx;
		text-align: center;
		line-height: 70rpx;
	}

	.noneInfos {
		text-align: center;
		padding: 100rpx;
		color: #999
	}

	.editBtn {
		color: #999
	}

	.fui-cropper__tabbar {
		/* #ifndef APP-NVUE */
		display: flex;
		z-index: 20;
		position: relative;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		height: 120rpx;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifdef APP-NVUE */
		border-top: 0.5px solid #666;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	.fui-cropper__tabbar::before {
		content: ' ';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #666;
		transform: scaleY(0.5);
		transform-origin: 0 0;
		z-index: 21;
	}

	/* #endif */

	.fui-text {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		font-size: 32rpx;
		font-weight: normal;
		color: #fff;
		flex: 1;
		text-align: center;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.words-image {
		height: 200rpx;
		border-radius: 10rpx;
	}
</style>